<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../before/css/common.css" rel="stylesheet" tyle="text/css" />
    <link href="../before/css/style.css" rel="stylesheet" type="text/css" />
    <link href="../before/fonts/iconfont.css" rel="stylesheet" type="text/css" />
    <script src="../after/js/jquery-2.1.1.min.js"></script>
    <link rel="stylesheet" href="/after/css/laypage.css">
    <link rel="stylesheet" type="text/css" href="../before/h-ui/css/H-ui.min.css" />
    <script type="text/javascript" src="../before/h-ui/js/H-ui.js"></script>
    <script type="text/javascript" src="../after/js/vue/vue.min.js"></script>
    <script src="../before/js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
    <script src="../before/js/common_js.js" type="text/javascript"></script>
    <script src="../before/js/footer.js" type="text/javascript"></script>
    <script src="../before/js/jquery.jumpto.js" type="text/javascript"></script>
    <script type="text/javascript" src="/after/js/laypage/laypage.js" charset="utf-8"></script>
    <script type="text/javascript" src="/after/js/layer/layer.js" charset="utf-8"></script>
    <title>用户订单列表</title>
    <style>


    </style>
</head>
<script>
    var getUser = function() {
        $.ajax({
            url : "/address/getUser.do",
            type : "POST",
            dataType : "json",
            success : function(msg) {
                console.log(msg)
                if(msg.hashMap.user==null){
                    top.location.href="HJHStageLogin.ftl";
                }
            }
        });
    }
    getUser();

</script>
<body>



    <!--右侧样式布局-->

        <div class="Order_form">
            <div class="user_Borders">
                <div class="title_name">
                    <span class="name">我的订单</span>

                </div>
                <div class="Order_form_list">
                    <div class="panel panel-default" style="display:none;position:absolute; left:50%;margin-left:-250px;top:50%;margin-top:-190px;z-index: 1000;width: 350px;height: 310px;" id="pinlun">
                        <a href="javascript:;" style="float: right" onclick="guanbi()">关闭</a>
                        <div class="panel-header">评价</div>
                        <div class="panel-body">
                            <div class="clearfix">
                                <span class="f-l f-15 va-m">商品质量：</span>
                                <div id="star-1" name="star" class="star-bar size-M f-l mr-10 va-m"></div><strong id="result-1" class="f-l va-m"></strong><br/><br/>
                                <br/>
                                <span class="f-l f-15 va-m">物流速度：</span>
                                <div id="star-2" name="star" class="star-bar size-M f-l mr-10 va-m"></div><strong id="result-2" class="f-l va-m"></strong><br/><br/><br/>
                                <span class="f-l f-15 va-m">客服态度：</span>
                                <div id="star-3" name="star" class="star-bar size-M f-l mr-10 va-m"></div><strong id="result-3" class="f-l va-m">如果您不评论，我们则默认为你选择了3星评论</strong><br/>

                               <br/><br/><span class="f-l f-15 va-m">评论：</span>
                                <input type="text" id="miaoshu" style="border: 1px solid gray;width: 200px;height: 25px;" onkeyup="panduan()"/>
                                <span id="pin" style="color:gray"></span><br/><br>

                                <button style="float: left" class="btn btn-primary radius" onclick="guanbi()">取消</button>
                                    <button id="tijiao" style="float: right"  class="btn btn-primary radius disabled" onclick="tijiao()">提交</button>

                            </div>

                        </div>
                    </div>
                    <table  id="app">
                        <thead>
                        <tr><td class="list_name_title0">商品</td>
                            <td class="list_name_title1">原价(元)</td>
                            <!--<td class="list_name_title2">数量</td>-->
                            <td class="list_name_title4">实付款(元)</td>
                            <td class="list_name_title5">订单状态</td>
                            <td class="list_name_title6">操作</td>
                        </tr></thead>
                        <tbody v-for="(item,index) in result">
                        <tr><td colspan="6" :id="item" :name="item.id" class="Order_form_time">{{new Date(item.createTime).toLocaleString()}} 订单号：{{item.order_list}}</td></tr>
                        <tr>
                            <td colspan="2">
                                <table v-for="v in item.list1" class="Order_product_style">
                                    <tbody><tr onclick="show(this)">
                                        <td>
                                            <div class="product_name clearfix">
                                                <a href="javascript:;" class="product_img"><img :src="'../uploads/'+v.picture" width="80px" height="80px"></a>
                                                <a href="javascript:;">{{v.name}}</a>
                                            </div>
                                        </td>
                                        <td>{{v.price}}</td>
                                        <!--  <td>{{v.amount}}</td>-->
                                     </tr>
                                     </tbody></table>
                             </td>
                             <td class="split_line">{{item.zongjia}}</td>
                             <td class="split_line">
                                 <p  v-if="item.status=='0'">未发货</p>
                                 <p  v-else-if="item.status=='1'">已发货<br/><button :name="item.order_id"  class="btn btn-primary radius" onclick="queren(this.name)">确认收货</button></p>
                                 <p  v-else-if="item.status=='2'">已收货<br/><button :name="item.order_id"  class="btn btn-primary radius" onclick="tuihuo(this.name)">申请退货</button></p>
                                 <p  v-else-if="item.status=='3'">申请退货中<br/><button :name="item.order_id"  class="btn btn-primary radius" onclick="queren(this.name)">取消退货</button></p>
                                 <p  v-else>已退货</p>


                             </td>
                             <td class="operating">
                                 <a href="javascript:;" onclick="pinglun(this.name)"  :name="item.id">评论</a>
                                 <a href="javascript:;" onclick="del(this.name)"  :name="item.id">删除</a>
                             </td>
                         </tr>


                         <tr style="display:none;">
                             <td colspan="3">
            地址：{{item.address}}
                             </td>
                             <td >姓名：{{item.rname}}</td>
                             <td>
 电话：{{item.phone}}

                             </td>
                         </tr>


                         </tbody>
                     </table>
                     <div id="pagenav"></div>
                 </div>
             </div>

         </div>


 </body>
 </html>

 <script type="text/javascript">

     function queren(obj){
         $.ajax({
             url : "/order/queren.do",
             type : "POST",
             dataType : "json",
             data : {
                 id:obj
             },
             error:function () {
                 layer.msg("失败")
             },
             success : function(){
                 layer.msg("成功")
                 getUserPageList();
             }

         })
     }


     function tuihuo(obj){
         $.ajax({
             url : "/order/tuihuo.do",
             type : "POST",
             dataType : "json",
             data : {
                 id:obj
             },
             error:function() {
                 layer.msg("失败")
             },
             success : function(){
                 layer.msg("成功")
                 getUserPageList();
             }

         })
     }
     var id;
     var pinfen=0;
     var shangping=0;
     var wuliu=0;
     var kefu=0;
     function panduan(){
        pinfen=shangping/3+wuliu/3+kefu/3;
         if($("#miaoshu").val()!=null && $("#miaoshu").val()!=""){
          $("#tijiao").attr("class","btn btn-primary radius");
         }else{
             $("#tijiao").attr("class","btn btn-primary radius disabled");
             $("#pin").text("   评论不能为空");
         }
     }
     function guanbi(){
         $("#pinlun").hide();
     }
     function pinglun(obj){
         id=obj;
          shangping=3;
          wuliu=3;
          kefu=3;
          pinfen=3;
         $("#pinlun").show();
     }
     function tijiao(){

             if(pinfen<=5&&pinfen>=0){
             $.ajax({
                 url : "/order/pinlun.do",
                 type : "POST",
                 dataType : "json",
                 data : {
                     id:id,
                     pinfen: pinfen,
                     miaoshu:$("#miaoshu").val()
                 },

                 success : function() {
                     getUserPageList();

                 }

             })
                 $("#pinlun").hide();
         }
     }

     //星级评价
     $("#star-1").raty({
         hints: ['1','2', '3', '4', '5'],//自定义分数
         starOff: 'iconpic-star-S-default.png',//默认灰色星星
         starOn: 'iconpic-star-S.png',//黄色星星
         path: '../before/h-ui/images/star',//可以是相对路径
         number: 5,//星星数量，要和hints数组对应
         showHalf: true,
         targetKeep : true,
         click: function (score, evt) {//点击事件
             //第一种方式：直接取值
             $("#result-1").html(score+'分');
             shangping=score;
         }
     });
     $("#star-2").raty({
         hints: ['1','2', '3', '4', '5'],//自定义分数
         starOff: 'iconpic-star-S-default.png',//默认灰色星星
         starOn: 'iconpic-star-S.png',//黄色星星
         path: '../before/h-ui/images/star',//可以是相对路径
         number: 5,//星星数量，要和hints数组对应
         showHalf: true,
         targetKeep : true,
         click: function (score, evt) {//点击事件
             //第一种方式：直接取值
             $("#result-2").html(score+'分');
             wuliu=score;
         }
     });
     $("#star-3").raty({
         hints: ['1','2', '3', '4', '5'],//自定义分数
         starOff: 'iconpic-star-S-default.png',//默认灰色星星
         starOn: 'iconpic-star-S.png',//黄色星星
         path: '../before/h-ui/images/star',//可以是相对路径
         number: 5,//星星数量，要和hints数组对应
         showHalf: true,
         targetKeep : true,
         click: function (score, evt) {//点击事件
             //第一种方式：直接取值
             $("#result-3").html(score+'分');
             kefu=score;
         }
     });

     function  show(obj) {
         var temp=obj;
         $(temp).parent().parent().parent().parent().next().toggle();
     }
     function del(obj){
         $.ajax({
             url : "/order/dell.do",
             type : "POST",
             dataType : "json",
             data : {
                 id:obj
             },
             error:function () {
                 layer.msg("删除失败")
             },
             success : function(){
                 layer.msg("删除成功")
                 getUserPageList();
             }


         })
     }

     var app = new Vue({
         el : '#app',
         data : {
             result : []
         }
     });
     //查询用户数据
     var getUserPageList = function(curr) {
         $.ajax({
             url : "/order/getorder.do",
             type : "POST",
             dataType : "json",
             data : {
                 pageNum:curr || 1,
                 pageSize:3,
             },
             success : function(msg) {
                 app.result=msg.list;
                 console.log(msg)
                 laypage({
                     cont : 'pagenav', //容器。值支持id名、原生dom对象，jquery对象,
                     pages :msg.totlpage, //总页数
                     skin:'#CD00CD',
                     first : '首页',
                     last : '尾页',
                     curr : curr || 1, //当前页

                     jump : function(obj, first) { //触发分页后的回调

                         if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr

                             getUserPageList(obj.curr);

                         }
                     }
                 });
             }
         });
     }

     getUserPageList();

 </script>

